<template>
	<view class="integral-detail">
		<g-navbar title="积分明细" backgroundColor="none" />
		<scroll-view scroll-y class="integral-detail-list" @scrolltolower="scrolltolower">
			<view class="detail-item" v-for="(item,index) in detailList" :key="item.created_at">
				<view class="item-top">
					<view class="date reduce">
						{{item.created_at}}
					</view>
					<view class="origin reduce">
						来源：{{item.access_channel}}
					</view>
				</view>
				<view class="item-bottom">
					<view class="bottom-left">
						<view class="device-name reduce">
							设备sn：{{item.model_sn}}
						</view>
						<view class="amount reduce">
							交易金额：￥{{item.amount}}
						</view>
					</view>
					<view class="bottom-right">
						<view class="integral reduce">
							{{item.score}}积分
						</view>
					</view>
				</view>
			</view>
			<g-placeholder v-if="!detailList.length" />
			<uni-load-more iconType="circle" :status="status" @click="getDetailList" />
		</scroll-view>
	</view>
</template>

<script lang="ts" setup>
	import { onLoad } from '@dcloudio/uni-app';
	import { Ref, ref } from "vue";
	import REST_URL from '@/http/http.restUrl';
	import { useStore } from 'vuex';
	import { LOADING_STATUS } from '@/enum/loadingStatus';
	import { GET_STORE_USERINFO } from '@/store/gettersType';


	interface IDetail {
		model_sn : string;
		score : number;
		amount : string;
		after_earn_score : number;
		before_earn_score : number;
		created_at : string;
		access_channel : string;
	}

	const detailList : Ref<IDetail[]> = ref([]);

	const page : Ref<number> = ref(1);

	const status : Ref<LOADING_STATUS> = ref(LOADING_STATUS.MORE);


	onLoad(async () => {
		await uni.loginManger.$interceptor;
		getDetailList();
	})

	const store = useStore();


	const getDetailList = async () => {
		status.value = LOADING_STATUS.LOADING;
		const { data } = await uni.http.POST(REST_URL.getIntegralDetailList, {
			customer_id: store.getters[GET_STORE_USERINFO].id,
			page: page.value,
			page_num: 10,
		})
		page.value++
		detailList.value.push(...data.data);
		status.value = detailList.value.length >= data.total ? LOADING_STATUS.NOMORE : LOADING_STATUS.MORE
	}

	const scrolltolower = () => {
		if (status.value === LOADING_STATUS.LOADING) {
			return
		}
		getDetailList();
	}
</script>

<style scoped lang="scss">
	@import "./integralDetail.scss";
</style>